<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	response.setHeader("Cache-Control", "no-store");
	response.setDateHeader("Expires", 0);
	response.setHeader("Pragma", "no-cache");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>waitingForReceiving</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/js/comment.js"></script>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/stars.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/grade-style.css"
	rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath }/css/index.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/menu-style.css">
</head>
<body>
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">提示消息</h4>
				</div>
				<div class="modal-body">
					<p>您有订单被拒绝，是否需要查看详情？</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">否</button>
					<a type="button" class="btn btn-danger" href="historicalOrders">是</a>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<div class="contain">
		<c:import url="header.jsp"></c:import>


		<div class="container-fluid">
			<div class="container">
				<h2>My Order--wait for order</h2>
				<hr>
				<div class="row">
					<!-- dish title-->
					<table class="table table-striped table-title">
	<div class="container-fluid">
		<div class="container">
			<h2>My Order--wait for order</h2>
			<hr>
			<div class="row">
				<!-- dish title-->
				<table class="table table-striped table-title">
					<tr style="background-color: #D64B2A;color: white;">
							<td colspan="2" class="td-dish">Dish</td>
							<td class="td-price">Price</td>
							<td class="td-number">Number</td>
							<td class="td-sum">Sum</td>
							<td class="td-status">Order Status</td>
							<td class="td-option">Order Option</td>
						</tr>
					</table>
					<c:forEach var="order" items="${waitingForReceivingOrders }">
						<div class="order-top"></div>
						<table class="table table-content" id="${order.oId }">
							<tr class="order-info">
								<td colspan="3">${order.dt }</td>
								<td colspan="4">${order.merchant.mName }</td>
							</tr>
							<c:set var="i" scope="session" value="${1}" />
							<c:forEach var="items" items="${order.orderItems }">
								<tr>
									<td class="td-img"><img
										src="${pageContext.request.contextPath }/${items.img}"
										alt="${items.dName}" class="dish-img"></td>
									<td class="td-dName">${items.dName }</td>
									<td class="td-price">${items.price }</td>
									<td class="td-sum">${items.num }</td>
									<td>${items.total }</td>
									<c:if test="${i==1 }">
										<td rowspan="${order.numOfOrderItems }" class="con-status">${order.status }</td>
										<td rowspan="${order.numOfOrderItems }" class="con-option">
											<c:if test="${order.statusInt==1}">
												<button class="btn btn-danger option-btn"
													onclick="confirmOrder('${order.oId}')">确认收货</button>
											</c:if> <c:if test="${order.statusInt==0}">
												<span class="order-msg-span">订单已提交</span>
											</c:if> <c:set var="i" scope="session" value="${2}" />
										</td>
									</c:if>
								</tr>
							</c:forEach>
							<tr>
								<td colspan="6"></td>
								<td>Sum:${order.total }</td>
							</tr>
						</table>
						<td colspan="2" class="td-dish">Dish</td>
						<td class="td-price">Price</td>
						<td class="td-number">Number</td>
						<td class="td-sum">Sum</td>
						<td class="td-status">Order Status</td>
						<td class="td-option">Order Option</td>
					</tr>
				</table>
				<c:forEach var="order" items="${waitingForReceivingOrders }">
					<div class="order-top"></div>
					<table class="table table-content" id="${order.oId }">
						<tr class="order-info">
							<td colspan="3">${order.dt }</td>
							<td colspan="4">${order.merchant.mName }</td>
						</tr>
						<c:set var="i" scope="session" value="${1}" />
						<c:forEach var="items" items="${order.orderItems }">
							<tr>
								<td class="td-img"><img
									src="${pageContext.request.contextPath }/${items.img}"
									alt="${items.dName}" class="dish-img"></td>
								<td class="td-dName">${items.dName }</td>
								<td class="td-price">${items.price }</td>
								<td class="td-sum">${items.num }</td>
								<td>${items.total }</td>
								<c:if test="${i==1 }">
									<td rowspan="${order.numOfOrderItems }" class="con-status">${order.status }</td>
									<td rowspan="${order.numOfOrderItems }" class="con-option">
										<c:if test="${order.statusInt==1}">
											<button class="btn btn-danger option-btn"
												onclick="confirmOrder('${order.oId}')">确认收货</button>
										</c:if> <c:if test="${order.statusInt==0}">
											<span class="order-msg-span">订单已提交</span>
										</c:if> <c:set var="i" scope="session" value="${2}" />
									</td>
								</c:if>
							</tr>
						</c:forEach>
						<tr>
							<td colspan="6"></td>
							<td>Sum:${order.total }</td>
						</tr>
					</table>

					</c:forEach>
				</div>
			</div>
			<!--container end-->
		</div>
	</div>
	
	<c:import url="menu.jsp"></c:import>
	<div id="sssModal" class="modal fade" role="dialog"
		aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog" role="document">
			<div class="login-bg">
				<div class="contain">
					<div class="modal-body">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="container-fluid"></div>
							<div class="module form-module">
								<div class="toggle">Complaints</div>
								<div class="form">
									<div>
										<h2>
											<img src="images/mark.png" width="5%" height="5%"> Mark
										</h2>
									</div>
									<form action="grade" method="post">
										<div class="goods-comm">
											<div class="goods-comm-stars">
												<span class="star_l"><h5>Please give your grade
														for this ordering:</h5></span>
												<div id="rate-comm-1" class="rate-comm"></div>
											</div>
										</div>
									</form>
								</div>
								<div class="form l_text">
									<div>
										<h2>
											<img src="images/complain.png" width="8%" height="8%">
											Complaints
										</h2>
									</div>
									<label class="m_flo"></label>
									<form action="complain" method="post" id="complainform">
										<input id="mark-oid" type="text" value="0"
											style="display: none" name="oid">
										<textarea name="complaints" form="complainform" class="text"></textarea>
										<input type="submit" value="Submit" id="complain-submit">
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer"></div>
	<!--footer end-->
</body>
<script src='${pageContext.request.contextPath }/js/TweenMax.min.js'></script>
<script src="${pageContext.request.contextPath }/js/menu-script.js"></script>
<script type="text/javascript">
	// Toggle Function: CSS style control
	$('.toggle').click(function() {
		// Switches the Icon
		if (this.innerHTML == "Mark") {
			this.innerHTML = "Complaints";
		} else if (this.innerHTML == "Complaints") {
			this.innerHTML = "Mark";
		}

		// Switches the forms
		$('.form').animate({
			height : "toggle",
			'padding-top' : 'toggle',
			'padding-bottom' : 'toggle',
			opacity : "toggle"
		}, "slow");
	});

	function refresh() {

		$.ajax({
			url : "refreshOrderDetails",
			type : "get",
			success : function(data) {
				if (data != "nochange") {
					var arr = data.split(",");
					if (arr[1] == "refuse") {
						var tb = document.getElementById(arr[0]);
						var trs = tb.getElementsByTagName("tr");
						var tdStatus = trs[1].getElementsByTagName("td")[5];
						tdStatus.innerHTML = "商家已拒单";
						var tdConfirm = trs[1].getElementsByTagName("td")[6];
						var span = tdConfirm.getElementsByTagName("span")[0];
						span.innerHTML = "订单结束";
						$('#myModal').modal();
					} else if (arr[1] == "accept") {
						var tb = document.getElementById(arr[0]);
						var trs = tb.getElementsByTagName("tr");
						var tdStatus = trs[1].getElementsByTagName("td")[5];
						tdStatus.innerHTML = "商家已接单";
						var tdConfirm = trs[1].getElementsByTagName("td")[6];
						var span = tdConfirm.getElementsByTagName("span")[0];
						span.innerHTML = "";
						var button = document.createElement("button");
						button.setAttribute("class",
								"btn btn-danger option-btn");
						button.onclick = function() {
							confirmOrder(arr[0]);
						}
						button.innerHTML = "确认收货";
						span.appendChild(button);
					}
				}
			}
		});
	}
	window.onload = function() {
		setInterval("refresh()", 5000);
	}
</script>
</html>